/**
 * 列表页插件
 * last update time 2016-01-26
 * 描述：适用于简单查询页面
 * 功能：1.根据参数生成表格，
 *       2.全选功能
 *       3.添加按钮事件
 *       4.记录上次分页信息，需跳转页面传入state=has参数
 *       5.根据配置执行相应操作
 * 实例：查看下方注释
 */
var ListPlugin = (function () {
    "use strict";

    // 默认参数
    var defaults = {
        // 表格id
        tableid: '#myDataTable',
        // 处理程序url
        handlerUrl: '',
        // 获取列表额外参数
        listParams: {},
        // 列
        columns: [],
        // 行绘制回调函数
        rowCallback: function (row, data, index) {
        },
        // 行创建回调函数
        createdRow: function (row, data, dataIndex) {
        },
        // 表格重绘回调函数
        drawCallback: function (settings) {
        },
        // 表格初始化结束后回调函数
        initCompleteOther: function (settings, json, myDataTable) {
        }
    };

    // 构造函数
    function ListPlugin(options) {
        this.settings = $.extend({}, defaults, options);
    }

    // 初始化
    ListPlugin.prototype.init = function () {
        this.bindDatatables();
        this.bindClickEvent();
        this.bindOtherEvent();
        return this;
    };

    // 绑定点击事件
    ListPlugin.prototype.bindClickEvent = function () {

    };

    // 绑定其他事件
    ListPlugin.prototype.bindOtherEvent = function () {

    };

    // 绑定datatables
    ListPlugin.prototype.bindDatatables = function () {
        var settings = this.settings,
            myTable = settings.tableid,
            handlerUrl = settings.handlerUrl,
            listParams = settings.listParams,
            columns = settings.columns,
            rowCallback = settings.rowCallback,
            createRow = settings.createdRow,
            drawCallback = settings.drawCallback,
            initCompleteOther = settings.initCompleteOther,
            myDataTable = $(myTable).DataTable({
                //============Features============
                // 是否开启服务器模式(真分页用)
                serverSide: true,
                // 是否延迟渲染(如果这个选项打开，不是所有的行Node是可以被访问的,可以使用jQuery的代理事件)
                deferRender: true,
                // 控制是否显示表格左下角记录数的信息
                info: true,
                // 是否允许用户改变表格每页显示的记录数
                length: true,
                // 是否开启本地分页
                paging: true,
                // 是否显示处理状态
                processing: true,
                // 保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
                stateSave: true,
                // 是否允许开启排序(此为全局的配置)
                ordering: false,
                // 是否允许Datatables开启本地搜索
                searching: false,
                // 是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
                scrollCollapse: false,
                // 是否自适应宽度(如果已经定义了列宽，禁止这个选项可以实现最优的性能)
                autoWidth: true,
                // ===========================测试state问题
                //destory: true,

                //============Options============
                // 定义DataTables的组件元素的显示和显示顺序
                dom: 'rt<"bottom"iflp<"clear">>',
                // 定义在每页显示记录数的select中显示的选项
                lengthMenu: [5, 15, 20],
                // 初始页面长度 （每页的行数）
                pageLength: 5,
                // 分页按钮种类显示选项
                pagingType: 'full_numbers',

                //============Data============
                language: {
                    url: '/scripts/datatables/zh-CN.txt'
                },

                //============Data============
                ajax: {
                    // 路径
                    url: handlerUrl,
                    data: listParams
                },

                //============Columns============
                columns: columns,

                //============Callbacks============
                // 表格行(Row)绘制的回调函数(这个函数可用于设置行类名或操纵行 TR 元素(注意createdRow通常可以更有效))
                rowCallback: rowCallback,
                // tr元素被创建时候的回调函数(当tr元素被创建（所有的td元素已经插入进去），或者给tr绑定事件，该回调函数被执行，允许操作tr元素)
                createdRow: createRow,
                // Datatables每次重绘后执行的方法
                drawCallback: drawCallback,
                // 初始化结束后的回调函数(这个回调是指在所有数据都加载完成后)
                initComplete: function (settings, json) {
                    // 不好使
                    if (typeof myDataTable !== 'undefined') {
                        // view 页面穿过一个值来
                        if (!myUtil.getUrlParam('state')) {
                            // 清除state。
                            // 第一次进页面是没有开启保存状态的,用reload方法可以记录一次状态。
                            myDataTable.state.clear();
                            myDataTable.ajax.reload();
                        }
                    }

                    // 添加行高亮
                    $(myTable).on('click', 'tr', function () {
                        if ($(this).hasClass('selected')) {
                            $(this).removeClass('selected');
                        } else {
                            // 默认单选，去掉后是多选
                            myDataTable.$('tr.selected').removeClass('selected');
                            $(this).addClass('selected');
                        }
                    });

                    // 添加其他事件
                    initCompleteOther(settings, json, myDataTable);
                }
            });
    };

    // 返回构造函数
    return ListPlugin;
})();


/**
 * 单独用的写法
 */

//$(document).ready(function () {
//    var myDataTable = $('#myDataTable').DataTable({
//        //============Features============
//        // 是否开启服务器模式(真分页用)
//        serverSide: true,
//        // 是否延迟渲染(如果这个选项打开，不是所有的行Node是可以被访问的,可以使用jQuery的代理事件)
//        deferRender: true,
//        // 控制是否显示表格左下角记录数的信息
//        info: true,
//        // 是否允许用户改变表格每页显示的记录数
//        length: true,
//        // 是否开启本地分页
//        paging: true,
//        // 是否显示处理状态
//        processing: true,
//        // 保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
//        stateSave: true,
//        // 是否允许开启排序(此为全局的配置)
//        ordering: false,
//        // 是否允许Datatables开启本地搜索
//        searching: false,
//        // 是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
//        scrollCollapse: true,
//        // 是否自适应宽度(如果已经定义了列宽，禁止这个选项可以实现最优的性能)
//        autoWidth: true,
//        // ===========================测试state问题
//        //destory: true,
//
//        //============Options============
//        // 定义DataTables的组件元素的显示和显示顺序
//        dom: 'rt<"bottom"iflp<"clear">>',
//        // 定义在每页显示记录数的select中显示的选项
//        lengthMenu: [5, 15, 20],
//        // 初始页面长度 （每页的行数）
//        pageLength: 5,
//        // 分页按钮种类显示选项
//        pagingType: 'full_numbers',
//
//        //============Data============
//        language: {
//            url: '/scripts/datatables/zh-CN.txt'
//        },
//
//        //============Data============
//        ajax: {
//            // 路径
//            url: 'handler/UserHandler.ashx',
//            data: {
//                action: 'list',
//                userName: $('#userName').val(),
//                isDelete: $('#isDelete').val()
//            },
//        },
//
//        //============Columns============
//        columns: [
//            {
//                data: "id"
//
//            },
//            {
//                data: "userName"
//
//            },
//            {
//                data: "id"
//            },
//        ],
//
//        //============Callbacks============
//        // 表格行(Row)绘制的回调函数(这个函数可用于设置行类名或操纵行 TR 元素(注意createdRow通常可以更有效))
//        rowCallback: function (row, data, index) {
//            // 比如突出显示
//            //if (data[4] == "A") {
//            //    $('td:eq(4)', row).html('<b>A</b>');
//            //}
//        },
//        // tr元素被创建时候的回调函数(当tr元素被创建（所有的td元素已经插入进去），或者给tr绑定事件，该回调函数被执行，允许操作tr元素)
//        createdRow: function (row, data, dataIndex) {
//            // 比如这行数据需要变成红色
//            //if (data[4] == "A") {
//            //    $(row).addClass('important');
//            //}
//            //$('td:eq(2)', row).html('<a href="user_view.aspx?state=' + myDataTable.state() + '">查看</>');
//            $('td:eq(2)', row).html('<button class="btn btn-xs btn-success btnRowView"><i class="fa fa-search">查看</i></button>');
//        },
//        // Datatables每次重绘后执行的方法
//        drawCallback: function (settings) {
//            // 比如解决全选按钮下一页仍然是选择状态问题
//
//        },
//        // 初始化结束后的回调函数(这个回调是指在所有数据都加载完成后)
//        initComplete: function (settings, json) {
//            // 不好使
//            if (typeof myDataTable !== 'undefined') {
//                // view 页面穿过一个值来
//                if (!fnGetUrlParam('state')) {
//                    // 清除state。
//                    // 第一次进页面是没有开启保存状态的,用reload方法可以记录一次状态。
//                    myDataTable.state.clear();
//                    myDataTable.ajax.reload();
//                }
//            }
//            // 给最后一列按钮添加点击事件
//            //$('#myDataTable tbody tr td:eq(2)').on('click', '.btnRowView', function () {
//            $('#myDataTable tbody').on('click', '.btnRowView', function () {
//                var data = myDataTable.row($(this).parents('tr')).data();
//                var state = myDataTable.state();
//                window.self.location.href = 'user_view.aspx?id=' + data.id + '&&tag=view';
//            });
//
//            // 单击行
//            $('#myDataTable tbody').on('click', 'tr', function () {
//                var data = myDataTable.row(this).data();
//                //alert('You clicked on ' + data.userName + '\'s row');
//            });
//
//            // 添加行高亮
//            $('#myDataTable tbody').on('click', 'tr', function () {
//                if ($(this).hasClass('selected')) {
//                    $(this).removeClass('selected');
//                }
//                else {
//                    // 默认单选，去掉后是多选
//                    myDataTable.$('tr.selected').removeClass('selected');
//                    $(this).addClass('selected');
//                }
//            });
//
//            // 单击tbody中的行checkbox选中,需要先判断第一个元素是不是checkbox
//            if ($('#myDataTable tr:first:checkbox').length) {
//
//            }
//        }
//
//    });
//
//
//});


/**
 * 使用实例
 */

//$(document).ready(function () {
//    'use strict';
//    // 配置插件
//    var myListPlugin = new ListPlugin({
//        // 处理程序url
//        handlerUrl: 'handler/userHandler.ashx',
//        // 获取列表额外参数
//        listParams: {
//            action: 'list',
//            userName: $('#userName').val(),
//            isDelete: $('#isDelete').val()
//        },
//        // 列
//        columns: [
//            {
//                data: "id"

//            },
//            {
//                data: "userName"

//            },
//            {
//                data: "id"
//            }
//        ],
//        // 行绘制回调函数
//        rowCallback: function (row, data, index) {
//        },
//        // 行创建回调函数
//        createdRow: function (row, data, dataIndex) {
//            $('td:eq(2)', row).html('<button class="btn btn-xs btn-success btnRowView"><i class="fa fa-search">查看</i></button>');
//        },
//        // 表格重绘回调函数
//        drawCallback: function (settings) {
//            $("#checkall").prop("checked", false);
//        },
//        // 表格初始化结束后回调函数
//        initCompleteOther: function (settings, json, myDataTable) {
//            // 给最后一列按钮添加点击事件
//            $('#myDataTable tbody').on('click', '.btnRowView', function () {
//                var data = myDataTable.row($(this).parents('tr')).data();
//                window.self.location.href = 'user_view.aspx?id=' + data.id + '&&tag=view';
//            });

//        }
//    });

//    // 重写单击事件绑定
//    myListPlugin.bindClickEvent = function () {
//        // 添加按钮事件
//        $('#btnAdd').on('click', function () {
//            window.self.location.href = 'user_modify.aspx?state=has';
//        });

//    };

//    // 重写其他事件绑定
//    myListPlugin.bindOtherEvent = function () {
//        // 日期范围控件
//        $(".range_datetime").datepicker({
//            format: "yyyy-mm-dd",
//            todayBtn: "linked",
//            clearBtn: true,
//            language: "zh-CN",
//            autoclose: true,
//            todayHighlight: true,
//            toggleActive: true
//        });
//    };

//    // 初始化插件
//    myListPlugin.init();

//});